<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
</head>
<body>
    <canvas id="physicsCanvas" width="700" height="850"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // --- Helper functions ---
        function drawArrow(ctx, fromx, fromy, tox, toy, headlen = 10) {
            const dx = tox - fromx;
            const dy = toy - fromy;
            const angle = Math.atan2(dy, dx);
            ctx.moveTo(fromx, fromy);
            ctx.lineTo(tox, toy);
            ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(tox, toy);
            ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
        }

        // --- Draw Fig 2.1 ---
        function drawFig2_1() {
            ctx.save();
            ctx.strokeStyle = 'black';
            ctx.fillStyle = 'black';
            ctx.font = '16px Arial';
            ctx.textAlign = 'center';

            // Clamp
            ctx.fillStyle = '#D3D3D3'; // light gray
            ctx.fillRect(80, 80, 50, 20); // Top part
            ctx.fillRect(80, 104, 50, 20); // Bottom part
            ctx.strokeRect(80, 80, 50, 20);
            ctx.strokeRect(80, 104, 50, 20);
            ctx.fillStyle = 'black';
            ctx.textAlign = 'right';
            ctx.fillText('clamp', 70, 107);
            
            // Draw an arrow pointing to the clamp
            ctx.beginPath();
            ctx.moveTo(70, 100);
            ctx.lineTo(40, 70);
            ctx.lineTo(80, 85);
            ctx.stroke();

            // Metal strip - consists of two lines to give thickness
            ctx.lineWidth = 1;
            ctx.beginPath();
            // Top line of the strip
            ctx.moveTo(130, 100);
            ctx.bezierCurveTo(250, 100, 350, 150, 465, 150);
            // Bottom line of the strip
            ctx.moveTo(130, 102);
            ctx.bezierCurveTo(250, 102, 350, 152, 465, 152);
            // End cap
            ctx.moveTo(465, 150);
            ctx.lineTo(465, 152);
            ctx.stroke();


            // Initial horizontal position (dashed line)
            ctx.beginPath();
            ctx.setLineDash([5, 5]);
            ctx.moveTo(130, 101);
            ctx.lineTo(480, 101);
            ctx.stroke();
            ctx.setLineDash([]);
            
            // Load Mass M
            ctx.fillStyle = '#D3D3D3';
            ctx.fillRect(450, 137, 30, 30);
            ctx.strokeRect(450, 137, 30, 30);
            
            // Displacement s
            ctx.beginPath();
            ctx.setLineDash([3, 3]);
            const s_line_x = 465;
            const end_mass_y_dashed = 101;
            ctx.moveTo(s_line_x, end_mass_y_dashed);
            ctx.lineTo(s_line_x, 137); // to top of mass
            ctx.stroke();
            ctx.setLineDash([]);
            
            const arrow_x = 510;
            ctx.beginPath();
            drawArrow(ctx, arrow_x, 151, arrow_x, 101);
            drawArrow(ctx, arrow_x, 101, arrow_x, 151);
            ctx.stroke();
            
            ctx.font = 'italic 16px Arial';
            ctx.textAlign = 'left';
            ctx.fillText('s', arrow_x + 10, 126);

            // Labels
            ctx.font = '16px Arial';
            ctx.textAlign = 'center';
            ctx.fillText('metal strip', 300, 170);

            ctx.textAlign = 'left';
            ctx.fillText('load', 530, 155);
            ctx.font = 'italic 16px Arial';
            ctx.fillText('mass M', 530, 175);
            

            // Figure caption
            ctx.font = 'bold 16px Arial';
            ctx.textAlign = 'center';
            ctx.fillText('Fig. 2.1', 300, 250);

            ctx.restore();
        }

        // --- Draw Fig 2.2 ---
        function drawFig2_2() {
            ctx.save();

            // Graph parameters
            const originX = 350;
            const originY = 700;
            const graphWidth = 400;
            const graphHeight = 320;
            const xMin = -1.0, xMax = 1.0;
            const yMin = 0.0, yMax = 4.0;
            const xOffset = originX - (graphWidth / (xMax - xMin)) * (-xMin);
            const yOffset = originY;

            const scaleX = graphWidth / (xMax - xMin);
            const scaleY = graphHeight / (yMax - yMin);
            
            const mapX = (a) => xOffset + a * scaleX;
            const mapY = (s) => yOffset - s * scaleY;

            ctx.lineWidth = 0.5;
            ctx.strokeStyle = '#CCCCCC'; // Light grey for grid

            // Draw grid lines
            // Vertical lines
            for (let a = xMin; a <= xMax; a += 0.02) {
                ctx.beginPath();
                ctx.moveTo(mapX(a), mapY(yMin));
                ctx.lineTo(mapX(a), mapY(yMax));
                ctx.stroke();
            }
            // Horizontal lines
            for (let s = yMin; s <= yMax; s += 0.1) {
                ctx.beginPath();
                ctx.moveTo(mapX(xMin), mapY(s));
                ctx.lineTo(mapX(xMax), mapY(s));
                ctx.stroke();
            }
            
            // Draw Axes
            ctx.lineWidth = 1;
            ctx.strokeStyle = 'black';
            ctx.beginPath();
            // Y-Axis
            ctx.moveTo(mapX(0), mapY(yMin));
            ctx.lineTo(mapX(0), mapY(yMax));
            // X-Axis
            ctx.moveTo(mapX(xMin), mapY(yMin));
            ctx.lineTo(mapX(xMax), mapY(yMin));
            ctx.stroke();

            // Draw Ticks and Labels
            ctx.fillStyle = 'black';
            ctx.font = '14px Arial';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'top';
            // X-axis ticks
            for (let a = xMin; a <= xMax; a += 0.2) {
                ctx.beginPath();
                ctx.moveTo(mapX(a), mapY(yMin));
                ctx.lineTo(mapX(a), mapY(yMin) + 5);
                ctx.stroke();
                if (Math.abs(a) < 1e-9) {
                     ctx.fillText('0', mapX(a), mapY(yMin) + 8);
                } else {
                     ctx.fillText(a.toFixed(1), mapX(a), mapY(yMin) + 8);
                }
            }

            ctx.textAlign = 'right';
            ctx.textBaseline = 'middle';
            // Y-axis ticks
            for (let s = yMin; s <= yMax; s += 1.0) {
                 ctx.beginPath();
                 ctx.moveTo(mapX(0), mapY(s));
                 ctx.lineTo(mapX(0) - 5, mapY(s));
                 ctx.stroke();
                 ctx.fillText(s.toFixed(1), mapX(0) - 8, mapY(s));
            }

            // Draw Axis Titles
            ctx.font = 'italic 16px Arial';
            ctx.textAlign = 'right';
            ctx.fillText('s', mapX(0) - 15, mapY(yMax) + 5);
            ctx.font = '16px Arial';
            ctx.textAlign = 'left';
            ctx.fillText('/ cm', mapX(0) - 15, mapY(yMax) + 5);

            ctx.textAlign = 'center';
            ctx.textBaseline = 'top';
            const xAxisLabelY = mapY(yMin) + 25;
            ctx.font = 'italic 16px Arial';
            ctx.fillText('a', mapX(0) - 20, xAxisLabelY);
            ctx.font = '16px Arial';
            ctx.fillText('/ ms', mapX(0) + 2, xAxisLabelY);
            ctx.font = '12px Arial';
            ctx.fillText('−2', mapX(0)+32, xAxisLabelY-3);


            // Plot the line
            const p1 = { a: -0.9, s: 3.6 };
            const p2 = { a: 0.9, s: 0.8 };
            
            ctx.beginPath();
            ctx.lineWidth = 2;
            ctx.strokeStyle = 'black';
            ctx.moveTo(mapX(p1.a), mapY(p1.s));
            ctx.lineTo(mapX(p2.a), mapY(p2.s));
            ctx.stroke();

            // Figure caption
            ctx.font = 'bold 16px Arial';
            ctx.textAlign = 'center';
            ctx.fillText('Fig. 2.2', mapX(0), mapY(yMin) + 60);

            ctx.restore();
        }

        // --- Main drawing calls ---
        drawFig2_1();
        drawFig2_2();

    </script>
</body>
</html>